<template>
  <div class="component">
    <div>
      <div v-for="(item, index) in content" :key="index">
        <div class="item-container">
          <button
            :class="{ 'button-container': true, selected: isSelected(index) }"
            @click="handleClickButton(index, item)"
          >
            {{ item.selectContent }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch, ref } from "vue";
export default defineComponent({
  name: "QuestionAnswer",
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {}
    }
  },
  emits: ["childSelect1"],
  setup(props, { emit }) {
    const isSelected = (index: number) => {
      return selectedIndex.value === index;
    };
    const selectedIndex = ref<number | null>(null);
    const parent = ref(props.valueFromParent);
    const handleClickButton = (index: number, item: any) => {
      selectedIndex.value = index;
      item.parent = parent.value.sort;
      emit("childSelect1", item);
    };
    const content = ref(props.valueFromParent.moduleValue.value);
    watch(
      () => props.valueFromParent.moduleValue,
      newVal => {
        content.value = newVal.value;
      },
      { deep: true }
    );
    return {
      content,
      isSelected,
      handleClickButton
    };
  }
});
</script>

<style scoped>
.button-container {
  left: 37px;
  top: 1325.6px;
  width: 302px;
  height: 43px;
  opacity: 1;
  border-radius: 25px;
  background: gray;
  transition: background 0.3s;
}
.button-container.selected {
  background: #ff8d1a;
}
.item-container {
  padding-top: 9px;
  padding-left: 18px;
  margin-bottom: 5px;
}
.component {
  /* 样式 */
  color: white;
  border: 1px solid #ff8d1a;
  width: 345px;
  min-height: 60px;
  margin-top: 20px;
  background-color: #232323;
  border-radius: 10px;
  overflow: auto;
}
</style>
